<script setup lang="ts">
import { ref } from 'vue'
import router from '@/router/index'
import { watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useNavTabStore } from '@/stores'
import type { TabPaneName, TabsPaneContext } from 'element-plus'

const store = useNavTabStore()
const route = useRoute()
const navTabs = ref<any>()
const navTabsArry = ref<any>([])
const navTabValue = ref<any>()
const navTabList = ref<any>([])

const mergeArrays = (arry1: any, arry2: any) => {
  const duplicates = arry1.filter((item1: any) =>
    arry2.some((item2: any) => item1.path === item2.path && item1.name === item2.name)
  )
  // console.log('duplicates', duplicates)

  if (duplicates.length > 0) {
    navTabValue.value = duplicates[0].path
  } else {
    store.setNavTab(arry2[0])
    navTabValue.value = arry2[0].path
  }
}

const getRoutesInfo = () => {
  navTabsArry.value = []
  navTabs.value = router.currentRoute.value.matched.map((item: any) => {
    return {
      path: item.path,
      name: item.meta.title
    }
  })
  navTabs.value = navTabs.value.pop() // 取得最后一个
  navTabsArry.value.push(navTabs.value)
  navTabList.value = store.navTabList
    ? store.navTabList.map((item: any) => {
        return { path: item.path, name: item.name }
      })
    : []
  mergeArrays(navTabList.value, navTabsArry.value)
  // console.log('navigationTab', store.navTabList)
}

watch(
  route,
  () => {
    getRoutesInfo()
  },
  { immediate: true }
)

// 跳转路由
const routerGoTo = useRouter()
const clickTab = (pane: TabsPaneContext) => {
  // console.log('pane', pane.props.name)
  routerGoTo.push({
    path: `${pane.props.name}`
  })
}
const removeTab = (name: TabPaneName) => {
  // console.log(name)
  store.closeNavTab(name)
  navTabValue.value = store.navTabList.pop()?.path
  routerGoTo.push({
    path: `${navTabValue.value}`
  })
}
</script>

<template>
  <div class="navigationTabBox">
    <el-tabs
      v-model="navTabValue"
      type="card"
      class="navTabs"
      :closable="store.navTabList.length > 1"
      @tab-click="clickTab"
      @tab-remove="removeTab"
    >
      <el-tab-pane
        v-for="navTabItem in store.navTabList"
        :key="navTabItem.path"
        :label="navTabItem.name"
        :name="navTabItem.path"
      ></el-tab-pane>
    </el-tabs>
  </div>
</template>

<style scoped lang="less">
:deep(.el-tabs) {
  --el-tabs-header-height: 36px !important;
  .el-tabs__nav-next,
  .el-tabs__nav-prev {
    line-height: 39px;
  }
}
:deep(.el-tabs__header) {
  .el-tabs__nav {
    border: unset;
    border-right: 1px solid var(--cnac-bgc1);
    border-radius: unset;
  }
}
.navigationTabBox {
  // var(--cnac-bgc1)
  width: calc(100vw - 224px);
  height: 36px;
  border-bottom: 1px solid #e0e0e0;
  :deep(.navTabs) {
    .el-tabs__header {
      border-top: unset;
      border-bottom: unset;
      height: 36px;
      margin-bottom: 0;
      .is-active {
        // border-top: 1px solid var(--cnac-bgc1);
        border-bottom: 1px solid var(--cnac-bgc1);
        background-color: var(--cnac-bgc2);
      }
    }
    .el-tabs__content {
      display: none;
    }
  }
}
</style>
